import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Animated,
  Platform,
  Keyboard,
  TextInput,
} from 'react-native';

import dismissKeyboard from 'dismissKeyboard';
import ToastUtils from '../../common/ToastUtils';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import CommonAvatarView from '../common/CommonAvatarView';
import PostContentPage from '../post/PostContentPage';
import BaseItem from '../common/BaseItem';
import TImage from '../../components/TImage';
import Constants from '../../common/Constants';
import LoginCheckIsUserAction from '../../actions/login/LoginCheckIsUserAction';
import RequestQuanziCommentListAction from '../../actions/quanzi/RequestQuanziCommentListAction';
import RequestQuanziPostContentAction from '../../actions/quanzi/RequestQuanziPostContentAction';
import QuanziSendPostCommentAction from '../../actions/quanzi/QuanziSendPostCommentAction';
import RequestQuanziPostLikeAction from '../../actions/quanzi/RequestQuanziPostLikeAction';
import QZ_IsAdminAction from '../../actions/quanzi/QZ_IsAdminAction';

import QZ_FollowUser from '../../actions/quanzi/QZ_FollowUser';

import Popover from '../common/Popover';


export default class QuanziPostContentPage extends PostContentPage {
  constructor(props) {
    super(props);
  }

  _initShowTag() {
    super._initShowTag();
    this._showFooterBar = true;
    this._showShoucang=false;
    this._showCommentAfterContent = true;
    if (this.props.pageData.routeData.isGongGao) {
      this._showFooterBar = false;
      this._showZan=false;
      this._showCommentAfterContent = false;
    }
  }

  _sendRequestDataAction() {
    new QZ_IsAdminAction().call(this,{board_id:this.state.postData.board_id })
    new RequestQuanziPostContentAction().call(this,{board_id:this.state.postData.board_id, post_id: this.state.postData.post_id})
  }

  _renderView() {
    return (
      <View style={{marginLeft:SizeUtils.translateDesignWidthToCode(0),
        marginRight:SizeUtils.translateDesignWidthToCode(0), flexDirection:"column"}}>
        {this._renderLouzhuData()}
        {this._renderContent()}
        {this._renderComment()}
        
      </View>
    )
  }
  _PopoverPress(obj){
    this._closePopover(); 
    if (!this.state.isBottom) {
      this._sendReportAction({...obj,target_type:0});
    }else{
      this._sendUpdateTopAction({})
    }
  }
  _showMorePopover(ref) {
      this._popoverbtn.measure((ox, oy, width, height, px, py) => {
        this.setState({
              isBottom:true,
              isVisible: true,
              buttonRect: {x:px-20, y:Platform.OS !== 'ios'?py-5:py-30, width: 0, height: 45}
          });
      });
  }
  _showPopover(ref) {
      this._report.measure((ox, oy, width, height, px, py) => {
         this.setState({
              isBottom:false,
              isVisible: true,
              buttonRect: {x:px, y:Platform.OS !== 'ios'?py:py, width: 80, height: 45}
          });
      });
  }
  _renderNavigationBarRightButtonContent() {
    var ishas = false;
    const user_id =this.props.pageData.routeData&&this.props.pageData.routeData.userData.user_id||'';
    if (user_id===this.state.postData.by_user_id) {
      ishas = true;
    }
    if (this.state.is_admin) {ishas = true;}
    if (ishas===false) {return;}
    return (
    <View style={{flexDirection:'row',alignItems: 'center',}}>
        <TouchableOpacity onPress = {() => {this.setState({showShare:true});}}>
          <TImage source={require("../../../resource/images/common/share.png")}
            style={{width:34, height:34,marginRight:15}}/>
        </TouchableOpacity>
        <TouchableOpacity ref={(ref) => this._popoverbtn = ref} onPress = {() => {this._showMorePopover(true)}}>
          <TImage source={require("../../../resource/images/quanzi/btn_more.png")}
            style={{width:34, height:34,marginLeft:10}} resizeMode={"contain"}/>
        </TouchableOpacity>
      </View>
    )
  }
  _showShare(){
    this.setState({showShare:true});
  }

  _getShareData() {
    return {type:Constants.MODULE_TYPE.WORK_HARD,board_id:this.state.postData.board_id,
      post_id:this.state.postData.post_id,title:this.state.postData.title}
  }

  _renderLouzhuData() {
    if (this.props.pageData.routeData.isGongGao) {
      return;
    }
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(38),
          marginLeft:SizeUtils.translateDesignWidthToCode(40),
          marginRight:SizeUtils.translateDesignWidthToCode(40),
          flexDirection:"row", alignItems:"center"}}>
        {this._renderImageUrls()}
        <View style={{flexDirection:"column", paddingLeft:SizeUtils.translateDesignWidthToCode(40)}}>
            <View style={{flexDirection:'row',alignItems: 'flex-start',}}>
              <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32),
                color:"#333333"}}>
              楼主：{this.state.postData.by_name} 
              </Text>
              {this.state.postData.top===1?<Text style={{
                marginLeft:5,
                fontSize:12,color:'#fff',backgroundColor:'#ee3535'
              }}>置顶</Text>:null}
            </View>
            
            <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24),
                paddingTop:SizeUtils.translateDesignHeightToCode(20),
                color:"#999999"}}>
              发表于 {this.state.postData.posted_at}
            </Text>
        </View>
        {this._renderContentItemTagPer()}
      </View>
    )
  }
  //标签 
  _renderContentItemTagPer() {
    if (!this.state.data) {return}
    if (this.state.is_follow===undefined) {return}
    if (this.props.pageData.routeData.userData.user_id===this.state.data.by_user_id) {return}
    return (
      <TouchableOpacity style={{marginLeft:SizeUtils.translateDesignWidthToCode(20),
        backgroundColor:'#fff', borderRadius:SizeUtils.translateDesignNumToCode(10),
        height:SizeUtils.translateDesignHeightToCode(60),
        borderColor:'#ededed', borderWidth:0.5, marginRight:SizeUtils.translateDesignWidthToCode(10),
        flexDirection:"row", justifyContent:"center", alignItems:"center"}}
        onPress={()=>{this.followAction()}}>
        <Text style={{color:this.state.is_follow?'#ff9258':'#999', fontSize:SizeUtils.translateFontSizeToCode(30),
         textAlign:"center",
          marginLeft:SizeUtils.translateDesignWidthToCode(20), marginRight:SizeUtils.translateDesignWidthToCode(20)}}>
         {this.state.is_follow?'已关注':'+ 关注'}
       </Text>
      </TouchableOpacity>
    )
  }
  followAction(){
    new QZ_FollowUser().call(this, {user_id:this.state.data.by_user_id,status:!this.state.is_follow});
  }
  _renderImageUrls(){
    if(this.state.postData.by_avatar){
      return (<CommonAvatarView avatarUri={this.state.postData.by_avatar} size={120}/>);
    }else {
      return (<CommonAvatarView avatarUri={""} size={120}/>)
    }
  }

  _renderContent() {
    return (
      <View style={{flexDirection:"column",marginLeft:SizeUtils.translateDesignWidthToCode(0),
        marginRight:SizeUtils.translateDesignWidthToCode(0), paddingTop:SizeUtils.translateDesignHeightToCode(40)}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(36),
          marginLeft:SizeUtils.translateDesignWidthToCode(40),
          marginRight:SizeUtils.translateDesignWidthToCode(40),
          color:"#333333"}}>
          {this.state.postData.title}
        </Text>
        {this.props.pageData.routeData.isGongGao?null:this._renderPostImages()}
        {this.props.pageData.routeData.isGongGao?
            <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24),
                marginLeft:SizeUtils.translateDesignWidthToCode(40),
                paddingTop:SizeUtils.translateDesignHeightToCode(20),
                color:"#999999"}}>
              {this.state.postData.posted_at +'  浏览:'+ this.state.postData.readers_num}
            </Text>
          :null}
        {
          this.props.pageData.routeData.isGongGao?super._renderContent():
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333",
          marginLeft:SizeUtils.translateDesignWidthToCode(40),
          marginRight:SizeUtils.translateDesignWidthToCode(40),
          paddingTop:SizeUtils.translateDesignHeightToCode(40)}}>
          {this.state.postData.content}
        </Text>
        }
         {this.props.pageData.routeData.isGongGao?null:this._renderZanView()}
      </View>
    )
  }
  _getZanImageSource() {
    if(this.state.is_liked == 1) {
      return require("../../../resource/images/common/dianzan.png");
    }
    else {
      return require("../../../resource/images/common/dianzanr.png");
    }
  }
  _renderZanView(){
    if(this._showZan === false) {
      return;
    }
    return(
      <View style={{
        height:SizeUtils.translateDesignHeightToCode(100),
        flexDirection:'row',
        alignItems: 'center',justifyContent: 'center',
      }}>
        <TouchableOpacity onPress={this._onPressLikeBtn.bind(this)} style={{
          width:SizeUtils.translateDesignWidthToCode(160),
          height:SizeUtils.translateDesignHeightToCode(60),
          borderRadius:SizeUtils.translateDesignHeightToCode(60),
          borderWidth:0.5,
          borderColor:this.state.is_liked == 1?'#ee3535':'#e3e3e3',
          justifyContent: 'center',alignItems: 'center',
          flexDirection:'row',
        }}>
          <TImage source={this._getZanImageSource()}
              style={{width:34, height:34}}/>
            <Text style={{marginLeft:5,color:this.state.is_liked == 1?'#ee3535':'#e3e3e3',fontSize:SizeUtils.translateFontSizeToCode(22)}}>{this._getLinkNum()}
            </Text>
        </TouchableOpacity>
        {/*<TouchableOpacity ref={(ref) => this._report = ref} onPress={()=>{this._showPopover(false)}} style={{
          width:SizeUtils.translateDesignWidthToCode(160),
          height:SizeUtils.translateDesignHeightToCode(60),
          marginLeft:SizeUtils.translateDesignWidthToCode(40),
          borderRadius:SizeUtils.translateDesignHeightToCode(60),
          borderWidth:0.5,
          borderColor:'#999',
          justifyContent: 'center',alignItems: 'center',
          flexDirection:'row',
        }}>
            <Text style={{marginLeft:5,color:'#999',fontSize:SizeUtils.translateFontSizeToCode(30)}}>{'举报'}
            </Text>
        </TouchableOpacity>*/}
      </View>
    );
  }
  _getCommentTitle() {
    return "评论区(" + this.state.postData.comments_num + "):";
  }

  _renderPostImages(){
    if(this.state.postData.image_urls){
      return (
        <View style={{marginTop:SizeUtils.translateDesignHeightToCode(40),marginBottom:SizeUtils.translateDesignHeightToCode(20),}}>
          {this.state.postData.image_urls.map((item, index) =>
            {
              return (
                <View  key={index}  style={{marginTop:SizeUtils.translateDesignHeightToCode(0),}}>
                  <TImage source={{uri:item}} translatedSize = {true} isMini={true} miniSize={"mini300_q80"} resizeMode={"cover"} style={{marginBottom:10,marginLeft:SizeUtils.translateDesignWidthToCode(40),width:SizeUtils.translateDesignWidthToCode(750-80), height:SizeUtils.getWindowSize().width*0.8}}
                    onPress={{type:["fullScreen"]}} />
                </View>
              )
            })}
        </View>
      )
    }
  }

  _sendRequestCommentListAction(page) {
    if (this.state.postData.board_id) {
      let data = {page:page, page_size:10,
      board_id:this.state.postData.board_id,
      post_id:this.props.pageData.routeData.post_id};
      new RequestQuanziCommentListAction().call(this, data);
    }
  }

  _getModuleType() {
    return Constants.MODULE_TYPE.QUAN_ZI;
  }
}
